<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta content="webkit" name="renderer"/>
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="keywords" content="PoweredByJeeSiteV4.0"/>
    <meta http-equiv="Cache-Control"
          content="no-cache, no-store, must-revalidate"/>
    <meta name="description" content="PoweredByJeeSiteV4.0"/>
    <meta
            content="no-cache" http-equiv="Pragma"/>
    <meta http-equiv="Expires" content="0"/>
    <meta
            content="width=device-width, initial-scale=1, user-scalable=1" name="viewport"/>
    <title>切换主题风格 - JeeSite Demo</title>
    <script th:src="@{/global.min.js}"></script>
    <script th:src="@{/jquery/jquery-1.12.4.min.js}"></script>
    <script th:src="@{/jquery/jquery-migrate-1.4.1.min.js}"></script>
    <!--[if lt IE 9]>
    <script th:src="@{/common/h5fix.min.js}"></script><![endif]-->
    <link rel="stylesheet" th:href="@{/fonts/font-icons.min.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/select2/4.0/select2.css}">
    <link rel="stylesheet" th:href="@{/icheck/1.0/minimal/grey.css}">
    <link rel="stylesheet" th:href="@{/adminlte/css/AdminLTE.min.css}">
    <link rel="stylesheet" th:href="@{/common/jeesite.css}">
    <link rel="stylesheet" th:href="@{/common/common.css}">
</head>
<body class="hold-transition ">
<div class="wrapper">
    <style>
        .list-unstyled {
            margin: 10px;
        }

        .full-opacity-hover {
            opacity: 1;
            filter: alpha(opacity=1);
            border: 1px solid #fff
        }

        .full-opacity-hover:hover {
            border: 1px solid #f00;
        }
    </style>
    <ul class="list-unstyled clearfix">
        <li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)" data-skin="skin-blue"
                                                                   style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                                                                   class="clearfix full-opacity-hover">
            <div>
                <span style="display:block; width: 20%; float: left; height: 15px; background: #367fa9"></span><span
                    class="bg-light-blue" style="display:block; width: 80%; float: left; height: 15px;"></span>
            </div>
            <div>
                <span style="display:block; width: 20%; float: left; height: 35px; background: #222d32"></span><span
                    style="display:block; width: 80%; float: left; height: 35px; background: #f4f5f7"></span>
            </div>
        </a>
            <p class="text-center no-margin">
                蓝
            </p>
        </li>
        <li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)" data-skin="skin-black"
                                                                   style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                                                                   class="clearfix full-opacity-hover">
            <div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix">
                <span style="display:block; width: 20%; float: left; height: 15px; background: #fefefe"></span><span
                    style="display:block; width: 80%; float: left; height: 15px; background: #fefefe"></span>
            </div>
            <div>
                <span style="display:block; width: 20%; float: left; height: 35px; background: #222"></span><span
                    style="display:block; width: 80%; float: left; height: 35px; background: #f4f5f7"></span>
            </div>
        </a>
            <p class="text-center no-margin">
                白
            </p>
        </li>
        <li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)" data-skin="skin-purple"
                                                                   style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                                                                   class="clearfix full-opacity-hover">
            <div>
                <span style="display:block; width: 20%; float: left; height: 15px;"
                      class="bg-purple-active"></span><span class="bg-purple"
                                                            style="display:block; width: 80%; float: left; height: 15px;"></span>
            </div>
            <div>
                <span style="display:block; width: 20%; float: left; height: 35px; background: #222d32"></span><span
                    style="display:block; width: 80%; float: left; height: 35px; background: #f4f5f7"></span>
            </div>
        </a>
            <p class="text-center no-margin">
                紫
            </p>
        </li>
        <li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)" data-skin="skin-green"
                                                                   style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                                                                   class="clearfix full-opacity-hover">
            <div>
                <span style="display:block; width: 20%; float: left; height: 15px;" class="bg-green-active"></span><span
                    class="bg-green" style="display:block; width: 80%; float: left; height: 15px;"></span>
            </div>
            <div>
                <span style="display:block; width: 20%; float: left; height: 35px; background: #222d32"></span><span
                    style="display:block; width: 80%; float: left; height: 35px; background: #f4f5f7"></span>
            </div>
        </a>
            <p class="text-center no-margin">
                绿
            </p>
        </li>
        <li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)" data-skin="skin-red"
                                                                   style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                                                                   class="clearfix full-opacity-hover">
            <div>
                <span style="display:block; width: 20%; float: left; height: 15px;" class="bg-red-active"></span><span
                    class="bg-red" style="display:block; width: 80%; float: left; height: 15px;"></span>
            </div>
            <div>
                <span style="display:block; width: 20%; float: left; height: 35px; background: #222d32"></span><span
                    style="display:block; width: 80%; float: left; height: 35px; background: #f4f5f7"></span>
            </div>
        </a>
            <p class="text-center no-margin">
                红
            </p>
        </li>
        <li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)" data-skin="skin-yellow"
                                                                   style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                                                                   class="clearfix full-opacity-hover">
            <div>
                <span style="display:block; width: 20%; float: left; height: 15px;"
                      class="bg-yellow-active"></span><span class="bg-yellow"
                                                            style="display:block; width: 80%; float: left; height: 15px;"></span>
            </div>
            <div>
                <span style="display:block; width: 20%; float: left; height: 35px; background: #222d32"></span><span
                    style="display:block; width: 80%; float: left; height: 35px; background: #f4f5f7"></span>
            </div>
        </a>
            <p class="text-center no-margin">
                黄
            </p>
        </li>
        <li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)" data-skin="skin-blue-light"
                                                                   style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                                                                   class="clearfix full-opacity-hover">
            <div>
                <span style="display:block; width: 20%; float: left; height: 15px; background: #367fa9"></span><span
                    class="bg-light-blue" style="display:block; width: 80%; float: left; height: 15px;"></span>
            </div>
            <div>
                <span style="display:block; width: 20%; float: left; height: 35px; background: #f9fafc"></span><span
                    style="display:block; width: 80%; float: left; height: 35px; background: #f4f5f7"></span>
            </div>
        </a>
            <p class="text-center no-margin" style="font-size: 12px">
                蓝灰
            </p>
        </li>
        <li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)"
                                                                   data-skin="skin-black-light"
                                                                   style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                                                                   class="clearfix full-opacity-hover">
            <div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix">
                <span style="display:block; width: 20%; float: left; height: 15px; background: #fefefe"></span><span
                    style="display:block; width: 80%; float: left; height: 15px; background: #fefefe"></span>
            </div>
            <div>
                <span style="display:block; width: 20%; float: left; height: 35px; background: #f9fafc"></span><span
                    style="display:block; width: 80%; float: left; height: 35px; background: #f4f5f7"></span>
            </div>
        </a>
            <p class="text-center no-margin" style="font-size: 12px">
                白灰
            </p>
        </li>
        <li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)"
                                                                   data-skin="skin-purple-light"
                                                                   style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                                                                   class="clearfix full-opacity-hover">
            <div>
                <span style="display:block; width: 20%; float: left; height: 15px;"
                      class="bg-purple-active"></span><span class="bg-purple"
                                                            style="display:block; width: 80%; float: left; height: 15px;"></span>
            </div>
            <div>
                <span style="display:block; width: 20%; float: left; height: 35px; background: #f9fafc"></span><span
                    style="display:block; width: 80%; float: left; height: 35px; background: #f4f5f7"></span>
            </div>
        </a>
            <p class="text-center no-margin" style="font-size: 12px">
                紫灰
            </p>
        </li>
        <li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)"
                                                                   data-skin="skin-green-light"
                                                                   style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                                                                   class="clearfix full-opacity-hover">
            <div>
                <span style="display:block; width: 20%; float: left; height: 15px;" class="bg-green-active"></span><span
                    class="bg-green" style="display:block; width: 80%; float: left; height: 15px;"></span>
            </div>
            <div>
                <span style="display:block; width: 20%; float: left; height: 35px; background: #f9fafc"></span><span
                    style="display:block; width: 80%; float: left; height: 35px; background: #f4f5f7"></span>
            </div>
        </a>
            <p class="text-center no-margin" style="font-size: 12px">
                绿灰
            </p>
        </li>
        <li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)" data-skin="skin-red-light"
                                                                   style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                                                                   class="clearfix full-opacity-hover">
            <div>
                <span style="display:block; width: 20%; float: left; height: 15px;" class="bg-red-active"></span><span
                    class="bg-red" style="display:block; width: 80%; float: left; height: 15px;"></span>
            </div>
            <div>
                <span style="display:block; width: 20%; float: left; height: 35px; background: #f9fafc"></span><span
                    style="display:block; width: 80%; float: left; height: 35px; background: #f4f5f7"></span>
            </div>
        </a>
            <p class="text-center no-margin" style="font-size: 12px">
                红灰
            </p>
        </li>
        <li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)"
                                                                   data-skin="skin-yellow-light"
                                                                   style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                                                                   class="clearfix full-opacity-hover">
            <div>
                <span style="display:block; width: 20%; float: left; height: 15px;"
                      class="bg-yellow-active"></span><span class="bg-yellow"
                                                            style="display:block; width: 80%; float: left; height: 15px;"></span>
            </div>
            <div>
                <span style="display:block; width: 20%; float: left; height: 35px; background: #f9fafc"></span><span
                    style="display:block; width: 80%; float: left; height: 35px; background: #f4f5f7"></span>
            </div>
        </a>
            <p class="text-center no-margin" style="font-size: 12px">
                黄灰
            </p>
        </li>
    </ul>
</div>

<a id="scroll-up" href="#" class="btn btn-sm"><i class="fa fa-angle-double-up"></i></a>
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/select2/4.0/select2.js}"></script>
<script th:src="@{/select2/4.0/i18n/zh_CN.js}"></script>
<script th:src="@{/layer/3.1/layer.js}"></script>
<script th:src="@{/my97/WdatePicker.js}"></script>
<script th:src="@{/common/jeesite.js}"></script>
<script th:src="@{/common/i18n/jeesite_zh_CN.js}"></script>
<script th:src="@{/common/common.js}"></script>
<script>
    $('.full-opacity-hover').click(function () {
        top.location = '/a/sys/switchSkin/' + $(this).data('skin');
    });
</script>